<template>
  <view class="content need_scroll_top_view" >
    <view class="top-bg" style="background-image: url(/static/image/freeStore/login-top.jpg);"></view>
    <view class="shadow" style="background-image: url(/static/image/freeStore/login-shadow.png);"></view>
    <view class="wrap">
      <view class="title">
          加盟入驻
      </view>
      <view class="inpt full">
        <input class="input" type="number" v-model="info.phone" maxlength="11" placeholder="请输入手机号" @blur="backFixationTop()">
      </view>
      <view class="code-box">
        <view class="inpt sm">
          <input class="input" type="number" v-model="info.code" maxlength="6" placeholder="请输入手机验证码" @blur="backFixationTop()">
        </view>
        <view class="btn" :class="{timer: info.phone}" v-if="!timer" @click="getCode">
          获取验证码
        </view>
        <view class="btn timer" v-else>
          已发送({{count}})s
        </view>
      </view>
      <view class="agree">
        <!-- <radio :value="isCheck" :checked="isCheck == '1'" @tap="isAgree" class="agree-radio" color="#4745DF"/> -->
        <text class="agree-text-1">注册表示您已同意<text style="color: #4745DF;" @click="checkFile">《社区电商注册协议》</text></text>
      </view>
      <view class="register" :class="{ing: info.phone && info.code}" @click="login">
        注 &nbsp;&nbsp;&nbsp;&nbsp; 册
      </view>
    </view>
    <view class="explain">
      <view>认证需准备的材料如下：</view>
      <view>1、营业执照照片；</view>
      <view>2、营业执照的法人身份证正反面。</view>
    </view>
    <view class="foot-bg" style="background-image: url(/static/image/freeStore/login-foot.jpg);"></view>
    <!-- 免费商户未认证 -->
    <!-- <uni-popup class="new-pop-style" ref="changePhonePop" type="center" :maskClick="modal.maskClick" :show="modal.show"> -->
    <view class="new-pop-style" v-if="modal.show">
      <view class="new-pop-box">
        <view class="pop-tit">温馨提示</view>
        <view class="pop-conter">
          恭喜，你已免费获得原价值4600元的商户资格，但您还需要进行商户认证，认证通过后才能享受到商户的相关权益。
        </view>
        <view class="pop-foot">
          <view class="btn cur" @click="gotoAuth">我知道了</view>
        </view>
      </view>
    </view>
    <!-- </uni-popup> -->
  </view>
</template>

<script>
import formValid from '@/unit/graceChecker.js'
import { SendCode } from '@/service/common/code.service.js'
import { loginByCode } from '@/service/login/login.service.js'
import { scrollToTargetPosition, setSafeAreaSize } from '@/mixin/index.mixin.js'
import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
export default {
  mixins: [scrollToTargetPosition, setSafeAreaSize],
  components: { uniPopup },
  data () {
    return {
      // isCheck: '0',
      info: {
        phone: '',
        code: ''
      },
      count: 0,
      timer: null,
      url: 'https://zy-image.oss-cn-hangzhou.aliyuncs.com/word/%E5%95%86%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.docx',
      modal: {
        show: false,
        maskClick: false
      }
    }
  },
  onLoad(option) {
    this.inviteId = option.inviteId;
  },
  methods: {
    gotoAuth () {
      uni.reLaunch({
        url: '/pages/freeStore/index?inviteId=' + this.inviteId
      })
    },
    // isAgree () {
    //   this.isCheck = this.isCheck == '0' ? '1' : '0'
    // },
    checkFile () {
      window.location.href = this.url;
    },
    login() {
      let rule = [
        {name:'phone', checkType: 'notnull', checkRule:'', errorMsg:'请输入手机号'},
        {name:'phone', checkType: 'phoneno', checkRule:'', errorMsg:'请输入正确的手机号'}
      ];
      var checkRes = formValid.check(this.info, rule);
      if (!checkRes) {
        uni.showToast({ title: formValid.error, icon: "none" });
        return false;
      } else if (!this.info.code) {
        uni.showToast({ title: '请输入验证码', icon: "none" });
      }
      //  else if (this.isCheck == '0') {
      //   uni.showToast({
      //     title: '请阅读商户服务协议并同意',
      //     icon: 'none'
      //   });
      //   return false;
      // } 
      let params = Object.assign({ mobile: this.info.phone, code: this.info.code, type: 0, inviteId: this.inviteId, freeStore: 1});
      
      loginByCode(params, (res) => {
        if (res.status == 0) {
          uni.setStorageSync('freeStore', res.data.freeStore);
          uni.setStorageSync('user_token', res.data.token);
          this.$store.dispatch('getUserInfo');
          this.modal.show = true;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      });
    },
    getCode () {
      let rule = [
        {name:'phone', checkType: 'notnull', checkRule:'', errorMsg:'请输入手机号'},
        {name:'phone', checkType: 'phoneno', checkRule:'', errorMsg:'请输入正确的手机号'},
      ];
      var checkRes = formValid.check(this.info, rule);
      if (!checkRes) {
        uni.showToast({ title: formValid.error, icon: "none" });
        return false;
      }
      SendCode({ mobile: this.info.phone, type: 0}, (res) => {
        if (res.status == 0) {
          uni.showToast({
            title: '验证码发送成功！',
            icon: 'none'
          });
          this.countDown();
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    countDown () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ uni-radio .uni-radio-input {
  width: 24rpx;
  height: 24rpx;
  background-color: transparent;
  border-color: #999999;
}
.content {
  height: 100vh;
  position: relative;
  font-family: PingFang SC;
  background: linear-gradient(to bottom, #4b52db 0%, #433fd9 37%, #322dc0 60%, #2e29b8 100%);
  .top-bg {
    width: 750rpx;
    height: 476rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .shadow {
    width: 654rpx;
    height: 59rpx;
    margin: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 420rpx;
    left: 0;
    right: 0;
    z-index: 20;
  }
  .wrap {
    width: 655rpx;
    height: 594rpx;
    margin: 0 auto 0;
    background-color: #FFFFFF;
    z-index: 10;
    position: absolute;
    top: 420rpx;
    left: 0;
    right: 0;
    .title {
      padding-top: 48rpx;
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
      color: rgba(51,51,51,1);
    }
    .inpt {
      background: #F6F6F6;
      border-radius: 10rpx;
      padding: 20rpx 30rpx;
      margin: 0 auto;
      &.full {
        width: 532rpx;
        margin-top: 38rpx;
        input {
          width: 100%;
        }
      }
      &.sm {
        width: 366rpx;
        input {
          width: 100%;
        }
      }
      input {
        font-family: PingFang SC;
        font-size: 26rpx;
        color: #333333;
      }
    }
    .code-box {
      width: 592rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 21rpx auto 0;
      .btn {
        width: 207rpx;
        height: 76rpx;
        border-radius: 10rpx;
        text-align: center;
        font-size: 26rpx;
        color: #FFFFFF;
        line-height: 76rpx;
        margin-left: 20rpx;
        background: #D4D4D4;
        &.timer {
          background: rgba(71,69,223,1);
        }
      }
    }
    .register {
      width: 400rpx;
      height: 70rpx;
      font-size: 28rpx;
      color: rgba(255,255,255,1);
      line-height: 70rpx;
      text-align: center;
      background: rgba(212,212,212,1);
      box-shadow: 0px 3rpx 10rpx 0px rgba(0, 0, 0, 0.35);
      border-radius: 32rpx;
      margin: 60rpx auto 0;
      &.ing {
        background-color: #4745DF;
      }
    }
    .agree {
      margin: 37rpx 0 0;
      padding-left: 37rpx;
      display: flex;
      align-items: center;
      color: #999999;
      font-size: 22rpx;
      .agree-radio {
        .uni-radio-input {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.foot-bg {
  position: absolute;
  bottom: 0;
  width: 750rpx;
  height: 384rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}
.explain {
  font-size: 22rpx;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 1038rpx;
  left: 112rpx;
  z-index: 10;
  view {
    line-height: 1.5;
  }
}
.new-pop-style {
  .new-pop-box {
    height: 364rpx;
  }
  .pop-foot {
    justify-content: center !important;
    .cur {
      border: none !important;
    }
  }
}
</style>
